<template>
	<base-page :title="title" navbarBgColor="white" backgroundColor="#F5F5F5">
		<view class="bg-white m-16 radius-12">
			<view class="p-16">
				<view class="card-box h-20 text-color-regular fs-14 font-normal">
					<text>账户名称:</text>
					<text class="card-info">{{bankDetail.cardName}}</text>
				</view>
				<view class="card-box h-20 flex justify-between item-center leading-20 mt-8">
					<view class="inline-flex item-center fs-14 text-color-regular font-normal">
						<text>银行卡号:</text>
						<text class="card-info">{{bankDetail.cardNo}}</text>
					</view>
					<view v-if="financialAccountType == 2" class="inline-flex item-center" @click="toChangeCard">
						<text class="text-color-hint fs-12 font-normal">去更改</text>
						<image class="w-16 h-17" src="@/static/svg/icon-arrow-right.svg"></image>
					</view>
				</view>
				<view class="card-box h-20 text-color-regular fs-14 font-normal mt-8">
					<text>开户银行:</text>
					<text class="card-info">{{bankDetail.bankName}}</text>
				</view>
			</view>
			<!-- <view v-else class="flex justify-between item-center leading-20">
				<text class="text-color-regular fs-14 font-normal">您还未绑定银行卡</text>
				<view class="inline-flex item-center" @click="toBinding">
					<text class="text-color-hint fs-12 font-normal">去绑卡</text>
					<image class="w-16 h-17" src="@/static/svg/icon-arrow-right.svg"></image>
				</view>
			</view> -->
			<view v-if="type==1" class="p-16 amt-wrapper">
				<!-- <view class="flex item-center">
					<text class="text-color-regular fs-14 font-normal mr-4 flex-shrink">¥</text>
					<input v-model="amount" type="digit" class="input-h fs-24 flex-1 w-0 mr-16 leading-24" placeholder="请输入提现金额" placeholder-class="text-color-hint" />
					<view class="inline-flex center border-primary radius-14 h-26 px-12 fs-12 color-primary font-normal flex-shrink" @click="amtAll">全部提现</view>
				</view> -->
				<view class="flex item-center fs-14 font-normal pb-8 balance">
					<text class="text-color-regular">提现金额：</text>
					<text class="color-primary">¥<text class="fs-24">{{ detail.balanceAmt }}</text></text>
				</view>
				<view class="flex item-center fs-14 font-normal mt-8">
					<text class="text-color-regular">可提金额：</text>
					<text>¥{{ detail.balanceAmt }}</text>
				</view>
			</view>
		</view>
		<view v-if="type==2" class="title-text">请选择结算账单</view>
		<template v-if="type==2 && noEnoughList.length">
			<view class="bg-white m-16 p-16 radius-12" v-for="(business,businessIndex) in noEnoughList">
				<!-- <view class="no-enough-title " style="margin-bottom: 10px;">*因策划人补贴账户余额不足，共计<text class="color-primary">¥{{noEnoughList.totalNoEnoughAmt}}</text>暂不可提现</view> -->
				<view class="header">
					<view class="header-item">结算商家</view>
					<view class="header-item text-bold">{{ business[0].businessShortName }}</view>
				</view>
				<uni-table border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange($event, businessIndex)">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center">结算月份</uni-th>
						<uni-th align="center">结算金额</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in business" :key="index">
						<uni-td align="center">{{item.settleDate}}</uni-td>
						<uni-td align="center">¥{{item.tradeAmt}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</template>
		<view class="bg-white m-16 p-16 radius-12">
			<view class="text-color-regular fs-14 font-semibold mb-8">提现说明</view>
			<view class="leading-17 text-color-regular fs-12 font-normal" style="white-space: pre-wrap;" v-html="detail.description"></view>
			<!-- <view class="leading-17 text-color-regular fs-12 font-normal" style="white-space: pre-wrap;" v-if="type==2" v-html="detail.description"></view> -->
		</view>
		<template #footer>
			<view class="m-12 bg-primary radius-8 flex center h-46 fs-16 text-white" :style="disableSubmit?'opacity: 0.3;':''" @click="submit">确认提现</view>
		</template>
	</base-page>
</template>

<script setup name="Withdraw">
	import uniTable from '@/wallet/uni_modules/uni-table/components/uni-table/uni-table.vue'
	import uniTd from '@/wallet/uni_modules/uni-table/components/uni-td/uni-td.vue';
	import uniTr from '@/wallet/uni_modules/uni-table/components/uni-tr/uni-tr.vue';
	import uniTh from '@/wallet/uni_modules/uni-table/components/uni-th/uni-th.vue';
	import {
		computed,
		ref,
		getCurrentInstance,
		onBeforeUnmount
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		balanceAmtPre,
		subsidyMonthSettleList,
		balanceAmtApply,
		subsidyApply,
		bankCard
	} from '@/wallet/api/withdrawal.js'
	const title = ref('')
	const type = ref(null)
	const financialAccountType = ref(null)
	// const amount = ref('')
	const detail = ref({})
	const bankDetail = ref({})
	const noEnoughList = ref([])
	const getOpenerEventChannel = ref(null)
	const monthSettleBillIds = ref([])
	const toBinding = () => {
		uni.navigateTo({
			url: '/pagesB/withdraw/binding-bank-card',
			events: {
				onBindingSuccess() {
					console.log('绑定成功')
				}
			}
		})
	}

	const toChangeCard = () => {
		// uni.showToast({
		// 	icon: 'none',
		// 	title: '请联系客服修改'
		// })
		// return
		uni.navigateTo({
			url: '/wallet/pages/withdraw/change-bank-card',
			events: {
				onChangeSuccess() {
					console.log('修改成功')
					getBankCard()
				}
			}
		})
	}

	const disableSubmit = computed(() => {
		if(type.value==1){
			return !(detail.value.balanceAmt && +detail.value.balanceAmt > 0)
		}else{
			return !monthSettleBillIds.value.flat().length
		}
	})

	const submit = () => {
		if (disableSubmit.value) return
		uni.showLoading()
		if(type.value == 1){
			balanceAmtApply({applyAmt:detail.value.balanceAmt}).then(res => {
				uni.hideLoading()
				uni.showToast({
					icon:'none',
					title:'提现成功'
				})
				setTimeout(()=>{uni.navigateBack()},1000)
			}).catch(err => {
				uni.hideLoading()
				uni.showToast({
					icon:'none',
					title:err.message
				})
			})
			
		}else if(type.value == 2){
			subsidyApply({monthSettleBillIds: monthSettleBillIds.value.flat()}).then(res => {
				uni.hideLoading()
				uni.showToast({
					icon:'none',
					title:'提现成功'
				})
				setTimeout(()=>{uni.navigateBack()},1000)
			}).catch(err => {
				uni.hideLoading()
				uni.showToast({
					icon:'none',
					title:err.message
				})
			})
		}

	}
	
	const getBankCard = async () => {
		bankDetail.value = await bankCard()
	}
	
	const getPreInfo = async () => {
		let result = await balanceAmtPre()
		if (result) {
			detail.value = result
		}
	}
	// const amtAll = () => {
	// 	if(type.value ==1){
	// 		amount.value = detail.value.merchantAmt
	// 	}else if(type.value ==2){
	// 		amount.value = detail.value.merchantSubsidy
	// 	}
	// }
	const preRefresh = () => {
		getOpenerEventChannel.value.emit('reIndex','refresh')
	}
	const getNoEnough = async () => {
		let result = await subsidyMonthSettleList()
		if(result){
			noEnoughList.value = result.monthSettleBills
			detail.value.description = result.description
		}
	}
	const selectionChange = (e, index) => {
		let ids = []
		e.detail.index.forEach(item => {
			ids.push(noEnoughList.value[index][item].id)
		})
		monthSettleBillIds.value[index] = ids
	}
	onLoad((query) => {
		getOpenerEventChannel.value = getCurrentInstance().ctx.getOpenerEventChannel()
		type.value = query.type
		financialAccountType.value = query.financialAccountType
		title.value = query.type == 1 ? '商品本金提现' : query.type == 2 ? '补贴提现' : ''
		getBankCard()
		if(query.type == 1){
			getPreInfo()
		}
		if(query.type == 2){
			getNoEnough()
		}
	})
	onBeforeUnmount(() => {
		preRefresh()
	})
</script>
<style scoped lang="scss">
	.amt-wrapper{
		border-top: 4rpx solid #F5F5F5;
	}
	.balance{
		border-bottom: 2rpx solid #F5F5F5;
	}
	.header{
		display: flex;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0 0;
		border: 2rpx solid #ebeef5;
		border-bottom: none;
		.header-item{
			padding: 24rpx 20rpx;
			text-align: center;
			box-sizing: border-box;
			width: 60%;
			&:not(:last-child){
				width: 40%;
				border-right: 2rpx solid #ebeef5;
			}
		}
	}
	:deep(.uni-table){
		min-width: 100% !important;
	}
	.card-info {
		margin-left: 10px;
	}

	.card-box {
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		color: rgba(51, 51, 51, 1);
	}

	.input-h {
		height: 38px;
		line-height: 38px;
	}
	.no-enough-title{
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		color: rgba(51, 51, 51, 1);
	}
	.title-text{
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		margin-left: 32rpx;
	}
</style>